<script setup lang="ts">
const value = 55;

</script>

<template>
    <div class="demotitle">Dial（简洁仪表盘）示例</div>
    <div class="demomain">
        <div class="demoitem">
            <div class="itemtitle">基本使用</div>
            <div class="card">
                <div style="display: flex">
                    <div style="width: 100%;">
                        <f-dial :modelValue="55"></f-dial>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem">
            <div class="itemtitle">范围Min/Max</div>
            <div class="card">
                <div style="display: flex">
                    <div style="width: 100%;">
                        <f-dial :modelValue="10" :min="-50" :max="50"></f-dial>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem">
            <div class="itemtitle">字符串模板</div>
            <div class="card">
                <div style="display: flex">
                    <div style="width: 100%;">
                        <f-dial :modelValue="55" valueTemplate="{value}%"></f-dial>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem">
            <div class="itemtitle">粗细</div>
            <div class="card">
                <div style="display: flex">
                    <div style="width: 100%;">
                        <f-dial :modelValue="55" :strokeWidth="14"></f-dial>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem">
            <div class="itemtitle">大小</div>
            <div class="card">
                <div style="display: flex">
                    <div style="width: 100%;">
                        <f-dial :modelValue="55" :size="200"></f-dial>
                    </div>
                </div>
            </div>
        </div>
        <div class="demoitem">
            <div class="itemtitle">颜色</div>
            <div class="card">
                <div style="display: flex">
                    <div style="width: 100%;">
                        <f-dial :modelValue="55" valueColor="#B5E3BF" rangeColor="#6CC77F" fontColor="#6CC77F"></f-dial>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<style type="scss" scoped>
.demotitle {
    padding: 10px;
    font-size: 28px;
    font-weight: 600;
    color: #333333;
}

.demomain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .demoitem {
        width: 33.3%;
        padding: 10px;

        .itemtitle {
            font-size: 1.25rem;
            color: #000;
            font-family: inherit;
            font-weight: 600;
            line-height: 1.2;
            margin: 1rem 0 1rem;
        }

        .card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            margin-bottom: 1rem;
            padding: 2rem
        }
    }
}
</style>
